import {
  PageContainer,
} from '@ant-design/pro-components';
import { history } from 'umi';
import { Button, Card } from 'antd';
import { useRequest } from '@umijs/max';
import type { FC } from 'react';
import { getQrcode } from './service';
import { useState, useEffect } from 'react'
import QRCode from 'qrcode'
import useStyles from './style.style';

const BasicForm: FC<Record<string, any>> = () => {
  const { styles } = useStyles();
  const [qrcodeImg, setQrcodeImg] = useState<string>('');

  const init = (url: string) => {
    QRCode.toDataURL(url).then((url: string) => {
      setQrcodeImg(url)
    }).catch((err: Error) => {
      console.log(err)
    })
  }

  const { run } = useRequest(getQrcode, {
    manual: true,
    onSuccess: (data) => {
      init(data)
    },
  });

  useEffect(() => {
    run({})
  }, []);

  return (
    <PageContainer content={<Button onClick={() => history.back()}>返回</Button>}>
      <Card bordered={false} className={styles.qrcode_wrap}>
        <img src={qrcodeImg} alt="" className={styles.images} />
        <Button type='primary' className={styles.btn}>刷新</Button>
      </Card>
    </PageContainer>
  );
};
export default BasicForm;